<template>
    <div>
        <div>
            <el-row>
                <el-col :span="22" :offset="2">
                    <el-form :model="addOrder" status-icon :rules="nameRules" ref="ruleForm" label-width="100px" display: grid
                        class="demo-ruleForm">
                        <!-- 客户姓名 -->
                        <el-form-item label="客户"  prop="customerid" style="width: 300px;">
                            <el-input v-model="addOrder.customerid" placeholder="请输入客户姓名" ></el-input>
                        </el-form-item>

                        <!-- 动态增减商品 -->
                        <el-form-item v-for="(product, index) in addOrder.addProList" :label="'商品' + (index + 1)"
                            :key="product.key" :prop="'addProList.' + index + '.value'" style="width:100%;">
                            <!-- 商品类别 -->
                            <el-cascader 
                                placeholder="请选择商品类别"
                                v-model="product.category"
                                :options="Categories" 
                                :show-all-levels="false"
                                :props="{ expandTrigger: 'hover' }"
                                @change="changeCategory"
                            >
                            </el-cascader>
                            <!-- 商品 -->
                            <el-select v-model="product.id"   placeholder="请选择商品" @change="selectPro(index,product)">
                                <el-option v-for="pro in selectProList" :key="pro.id" :label="pro.name" :disabled="isDisabled(pro.id)"
                                    :value="pro.id">
                                </el-option>
                            </el-select>

                            <!-- 数量 -->

                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            
                            数量：
                            <el-input-number v-model="product.num" :precision="2" :step="0.5" :min="1.00" ></el-input-number>
                            ({{product.uname}})

                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            单价：
                            <el-input-number v-model="product.sale_price" :precision="2" :step="0.5" :min="0.00" ></el-input-number>（元）

                            <!-- {{(product.sale_price).toFixed(2)}}(元) -->
                           
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            类型：
                            {{product.type}}


                            <el-button type="danger" @click.prevent="removeProduct(product)" style="margin-left: 50px;">删除</el-button>
                        </el-form-item>

                        <el-row style="margin-top: 50px;">
                            <el-col :span="4" :offset="18">
                                总计：<el-tag>
                                    {{getTotal().toFixed(2)}}

                                </el-tag>
                            </el-col>
                        </el-row>



                        <el-form-item>
                            <el-button type="primary" @click="submitForm()">提交</el-button>
                            <el-button @click="addProduct">新增商品</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-form>

                </el-col>
            </el-row>

        </div>



    </div>
</template>


<script>


export default {
    data() {
        return {
            Categories:[],
            productList:[],
            selectProList:[],
            addOrder:{
                customerid:'',
                addProList:[{
                 
                    num: 0,
                    sale_price: 0,
     
                },{    
                    num: 0,
                    sale_price: 0,
    
                },{
                 
                    num: 0,
                    sale_price: 0,
    
                }],
                totalmoney:0

            },
            //客户姓名及验证规则
          
            nameList: [],
            nameRules:{  
                customerid:[{
                        required: true,
                        trigger: 'blur' ,
                        validator: (rule, value, callback)=>{
                            if(this.nameList.some(obj => obj.name==value)){
                                callback()
                            }else if(value === ''){
                                callback(new Error('客户不能为空'))
                            }else{
                                callback(new Error('该客户不存在'))
                            }
                        }
                    }]
                       
                    

                
               
            }
        }


    

    },
    methods:{
        removeProduct(product) {
            var index = this.addOrder.addProList.indexOf(product)
            if (index !== -1) {
                this.addOrder.addProList.splice(index, 1)
            }

        },
        submitForm(){
            if(this.addOrder.customerid==''){
                this.$message.error("请添加客户姓名")    
                return
            }

            if(this.addOrder.addProList[0].id == 0){
                this.$message.error("请至少添加一个商品")

                return
            }
            this.addOrder.totalmoney = this.getTotal()
            console.log(this.addOrder)
            for(const name of this.nameList){
                if(name.name == this.addOrder.customerid){
                    this.addOrder.customerid = name.id
                }
            }
            console.log("姓名："+this.addOrder.customerid)
            this.$axios.post("order/addByBackStage",this.addOrder).then(respData=>{
                if(respData.data.data){
                    this.$message({
                        message:"订单添加成功！",
                        type:"success"
                    })
                this.resetForm()
                }
            })
        },
        addProduct() {
        this.addOrder.addProList.push({
          value:{         
                 num: 0,
                 sale_price: 0,
             },
          key: Date.now()
        });
      },
        resetForm(){
            this.addOrder={
                name:'',
                addProList:[{
              
                    num: '',
                    sale_price: '',
            
    
                },{
             
               
                    num: '',
                    sale_price: '',
    
                },{
                 
                    num: '',
                    sale_price: '',
    
                }]
            }
        },
        changeCategory(value){
            this.selectProList=[]
            for(const pro of this.productList){
                if(pro.category_id == value[1] ){
                    this.selectProList.push(pro)
                }
            }


        },
        selectPro(index,product){
            console.log(index)
            
            console.log(product)
            for(const pro of this.selectProList){
                if(pro.id==product.id){
                    this.addOrder.addProList[index].sale_price=pro.sale_price
                    this.addOrder.addProList[index].stock=pro.stock
                    this.addOrder.addProList[index].type=pro.type
                    this.addOrder.addProList[index].uname=pro.uname

                }
            }
          
        },
        isDisabled(value){

            for(const pro of this.addOrder.addProList){
                if(pro.id == value){
                    return true
                }
            }
            return false
        },
        getTotal(){
            let totalmoney = 0;
            for(const pro of this.addOrder.addProList){
                if(pro.id != null){
                    totalmoney+=pro.num * pro.sale_price

                }
            }
            return totalmoney

        }

    },
    mounted(){
        //1.查出所有客户姓名 ✔️
        this.$axios.get("customer/getCustomerNames").then(respData => {
            this.nameList=respData.data.data
    
        })

        //2.获得商品父子类别的级联✔️
        this.$axios.get("category/getCategories").then(respData =>{
            this.Categories=respData.data.data
        })

        //3.获得所有商品
        this.$axios.get("product/getProducts").then(respData => {

            this.productList = respData.data.data})
            
    }
   
}
</script>

<style scoped>

</style>
